<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tian的文本编辑器</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/text-editor.css">
</head>
<body>
	<div class="tian-editor-box box-shadow">
		<!-- 功能按钮 -->
		<div id="J-tian-edit-but" class="tian-editor-but linear">
			<ul class="tian-editor-but-box">
				<!-- 源代码 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- h1-h4 -->
				<li class="but">
					<a href="javascript:void(0)"></a>
					<!-- 下拉菜单扩展 -->
					<div class="tian-editor-but-donw-menu box-shadow">
						<span class="tian-editor-down-head">H1</span>
						<span class="tian-editor-down-head">H2</span>
						<span class="tian-editor-down-head">H3</span>
						<span class="tian-editor-down-head">H4</span>
					</div>
				</li>
				<!-- 超链接 -->
				<li class="but-open">
					<a href="javascript:void(0)"></a>
					
				</li>
				<!-- 加粗 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 斜体 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 下划线 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 删除线 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 图片 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 左对齐 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 居中 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 右对齐 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 无序列表 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 有序列表 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 水平线 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 保存 -->
				<li><a href="javascript:void(0)"></a></li>
				<!-- 全屏 -->
				<li class="li-active"><a href="javascript:void(0)"></a></li>
			</ul>
		</div>
		<!-- 内容编辑区 -->
		<div id="J-tian-edit-area" class="tian-edit-area" contenteditable="true"></div>
		<!-- 源代码展示 -->
		<div class="tian-editor-code">
			<label for="J-tian-editor"></label>
			    <textarea id="J-tian-edit-code" class="tian-editor"></textarea>
		</div>
		<!-- 拖拽区域 -->
		<div id="J-tian-edit-drag" class="tian-editor-drag"></div>
		<!-- 填写链接地址及文本 -->
		<div id='J-tian-edit-link' class="tian-edit-mask">
			<div class="tian-add-link-box box-shadow">
				<!-- 链接地址 -->
				<div class="tian-link-box-txt">
					<label for="link-box-url">链接地址</label>
					<input type="text" id="link-box-url">
				</div>
				<!-- 文本内容 -->
				<div class="tian-link-box-txt">
					<label for="link-box-txt">文本内容</label>
					<input type="text" id="link-box-txt">
				</div>
				<!-- 链接内容按钮 -->
				<div class="tian-link-box-but">
					<button class="tian-link-box-but-ok">确定</button>
				  <button class="tian-link-box-but-cancel">取消</button>
				</div>
			</div>
		</div>
		<div id='J-tian-edit-img' class="tian-edit-mask">
			<div class="tian-add-link-box box-shadow">
				<!-- 链接地址 -->
				<div class="tian-link-box-txt">
					<label for="link-box-url">链接地址</label>
					<input type="text" id="link-box-url">
				</div>
				<!-- 文本内容 -->
				<div class="tian-link-box-txt">
					<label for="link-box-txt">描述</label>
					<input type="text" id="link-box-txt">
				</div>
				<!-- 链接内容按钮 -->
				<div class="tian-link-box-but">
					<button class="tian-link-box-but-ok">确定</button>
				<button class="tian-link-box-but-cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
	<script src="src/tian-app.js"></script>
	<script src="src/text-editor.js"></script>
</body>
</html>